<template>
  <div class="item__warp">
    <div class="tag">
      <template v-for="(item, index) in tips">
        <el-tag size="small" :type="item.type" effect="dark" :key="index">{{
          item.text
        }}</el-tag>
      </template>
    </div>
    <div
      class="title a-link"
      @click="target('details')"
      v-html="value.title"
    ></div>
    <div class="content">
      <div class="img-list"></div>
      <div class="word ellipsis-2" v-html="value.content"></div>
    </div>
    <div class="message">
      <el-avatar size="small" :src="avatar"></el-avatar>
      <span class="name">Yvonne</span>
      <i class="icon iconfont icon-shijian"></i>
      <span class="time">{{
        value.createTime | dateFormat("yyyy-MM-dd")
      }}</span>
      <i class="icon iconfont icon-yanjing"></i>
      <span class="read">{{ value.readNumber }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: Object, default: {} },
  },
  computed: {
    tips() {
      try {
        if (this.value.tips) {
          let arr = this.value.tips.split("|"),
            data = [];
          arr.forEach((item) => {
            data.push({
              text: item,
              type: this.randownType(),
            });
          });
          return data;
        }
      } catch (error) {}
      return [];
    },
  },
  data() {
    return {
      avatar: require("~/assets/img/icon-tx.jpg"),
    };
  },
  methods: {
    target(key, data) {
      switch (key) {
        case "details":
          this.$router.push({
            path: `/note/details/${this.value.noteId}`,
          });
          break;
        default:
          break;
      }
    },
    randownType() {
      let arr = ["info", "success", "warning", "danger"];
      let index = Math.floor(Math.random() * 4);
      return arr[index];
    },
  },
};
</script>

<style lang="scss" scoped>
.item__warp {
  padding: 30px;
  box-shadow: 0 2px 5px 0 rgba(146, 146, 146, 0.1);
  .tag {
    font-size: 0;
    .el-tag {
      margin-right: 10px;
    }
  }
  .title {
    font-size: 22px;
    line-height: 30px;
    margin: 10px 0px;
  }
  .content {
    font-size: 14px;
    color: #566573;
    margin-bottom: 15px;
  }
  .message {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #566573;
    .name,
    .time,
    .read {
      margin: 0px 15px 0px 10px;
    }
  }
}
</style>